<template>
    <el-form ref="form" :inline="true" :model="asset_data">
        <el-form-item label="ID号">
            <el-input v-model="asset_data.id"  size="mini" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="机器序列号：">
            <el-input v-model="asset_data.serial_no" size="mini"  ></el-input>
        </el-form-item>
        <el-form-item label="品牌：">
            <el-input v-model="asset_data.brand"  size="mini" ></el-input>
        </el-form-item>
        <el-form-item label="型号：">
            <el-input v-model="asset_data.model"  size="mini" ></el-input>
        </el-form-item>
        <el-form-item label="固定资产名称：">
            <el-input v-model="asset_data.assets_name"  size="mini" ></el-input>
        </el-form-item>
        <el-form-item label="名称简写：">
            <el-input v-model="asset_data.simple_name"  size="mini" ></el-input>
        </el-form-item>
        <el-form-item label="固定资产类型：">
            <el-select v-model="asset_data.assets_type" filterable placeholder="选择固定资产类型">
                    <el-option
                    v-for="item in this.$store.state.type_options"
                    :key="item.id"
                    :label="item.type_name"
                    :value="item.id"
                   >
                    </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="资产所在科室：">
            <el-select v-model="asset_data.assets_dep" filterable placeholder="选择资产所在科室">
                    <el-option 
                    v-for="item in this.$store.state.dep_options"
                    :key="item.id"
                    :label="item.dep_name"
                    :value="item.id">
                    </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="资产使用者：">
            <el-select
                v-model="asset_data.assets_user"
                filterable
                remote
                placeholder="输入首字母检索"
                :remote-method="getAssetUserList"
                :loading="isloading">
                <el-option
                    v-for="user in asset_userList"
                    :key="user.id"
                    :label="user.user_name"
                    :value="user.id">
                </el-option>
            </el-select>

        </el-form-item>
        <el-form-item label="管理科室：">
            <el-select v-model="asset_data.assets_manage_dep" filterable placeholder="选择资产所在科室">
                    <el-option 
                    v-for="item in this.$store.state.dep_options"
                    :key="item.id"
                    :label="item.dep_name"
                    :value="item.id">
                    </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="资产提供商：">
            <el-input v-model="asset_data.assets_company"  size="mini" ></el-input>
        </el-form-item>
        <el-form-item label="使用地点：">
            <el-input v-model="asset_data.use_location"  size="mini" ></el-input>
        </el-form-item>
        <el-form-item label="注册时间：">
             <el-date-picker
                v-model="asset_data.assets_time"
                type="date"
                placeholder="选择日期时间" size="mini" >
            </el-date-picker>
        </el-form-item>
        <el-form-item label="注册人员：">
            <el-select
                v-model="asset_data.assets_reg"
                filterable
                remote
                placeholder="输入首字母检索"
                :remote-method="getAssetUserList"
                :loading="isloading">
                <el-option
                    v-for="user in reg_userlist"
                    :key="user.id"
                    :label="user.user_name"
                    :value="user.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="报废时间：">
            <el-date-picker
                v-model="asset_data.scrap_time"
                type="date"
                placeholder="选择日期时间" size="mini" >
            </el-date-picker>
        </el-form-item>
        <el-form-item label="报废回收人员：">
            <el-select
                v-model="asset_data.scrap_user"
                filterable
                remote
                placeholder="输入首字母检索"
                :remote-method="getAssetUserList"
                :loading="isloading">
                <el-option
                    v-for="user in scrap_userlist"
                    :key="user.id"
                    :label="user.user_name"
                    :value="user.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="资产编号：">
            <el-input v-model="asset_data.assets_no"  size="mini" ></el-input>
        </el-form-item>
        <el-form-item label="备注">
            <el-input type="textarea" v-model="asset_data.other" size="mini" ></el-input>
        </el-form-item>
        <el-form-item >
            <el-button type="primary" @click="onSubmit" size="small" >提交</el-button>
            <el-button size="small" @click="closeHandle" >取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    name:"UpdateAssetDialog",
    data(){
        return{
            asset_data:{},//存储数据对象
            isloading:false,
            asset_userList:[{id:this.Asset.assets_user,user_name:this.Asset.assets_user_name}],//加载选中的用户人员列表
            reg_userlist:[{id:this.Asset.assets_reg,user_name:this.Asset.assets_reg_name}],//加载选中的注册人员检索临时列表
            scrap_userlist:[{id:this.Asset.scrap_user,user_name:this.Asset.scrap_user_name}]//加载选中的报废人员检索临时列表
        }
    },
    props:["Asset"],
    methods:{
        onSubmit(){
            console.log("提交时候在后台判断asset_data，如果有ID则修改，没ID则增加");
            console.log(this.asset_data);
        },
        closeHandle(){
            this.$bus.$emit("closeSetDialog")
        },
        //以拼音首字母或者文字，通过ajax检索资产使用者用户列表并选择
        getAssetUserList(keyword){
            if(keyword!=""){
                this.isloading=true;
                setTimeout(() => {
                    this.isloading=false;
                    this.asset_userList=this.reg_userlist=this.scrap_userlist=[{id:"001",user_name:"张三"},{id:"002",user_name:"李四"}];
                }, 2000);
            }
        }
    },
    mounted(){
        //深拷贝props传来的数据以便操作而不影响列表
       this.asset_data={
                id:this.Asset.id,
                serial_no:this.Asset.serial_no,
                brand:this.Asset.brand,
                model:this.Asset.model,
                assets_name:this.Asset.assets_name,
                simple_name:this.Asset.simple_name,
                assets_no:this.Asset.assets_no,
                assets_dep:this.Asset.assets_dep,
                //assets_dep_name:this.Asset.assets_dep_name,
                assets_user:this.Asset.assets_user,
                //assets_user_name:this.Asset.assets_user_name,
                assets_manage_dep:this.Asset.assets_manage_dep,
                //assets_manage_depN:this.Asset.assets_manage_depN,
                assets_company:this.Asset.assets_company,
                use_location:this.Asset.use_location,
                assets_time:this.Asset.assets_time,
                assets_reg:this.Asset.assets_reg,
                //assets_reg_name:this.Asset.assets_reg_name,
                scrap_time:this.Asset.scrap_time,
                scrap_user:this.Asset.scrap_user,
                //scrap_user_name:this.Asset.scrap_user_name,
                assets_type:this.Asset.assets_type,
                //assets_type_name:"",
                other:this.Asset.other
       }
    }
}
</script>
<style>

</style>